<#include "../header.ftl">
<style>
    a, a:hover, a:before, a:after {
        text-decoration: none;
        color: black;
    }
    .p-6 {
        padding: 2.5rem !important;
    }
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.7em + 1.5rem + 2px);
        padding: 0.75rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.7;
        color: #151b26;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #e3e6f0;
        border-radius: 0.25rem;
        transition: all 0.2s ease-in-out;
    }
    .btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 0.1rem solid rgb(227, 230, 240);
        padding: 0.75rem 1rem;
        font-size: 1rem;
        line-height: 1.7;
        border-radius: 0.25rem;
        transition: all 0.2s ease-in-out;
    }
    /*------中部开始------*/
    .main-banner {
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(21, 27, 38, 0.3) 100%), url('/images/test.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        background-blend-mode: darken;
    }
    /*------中部结束------*/

    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------中部开始------*/
        .space-2 {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .main-title {
            margin-bottom: 5rem;
        }
        .padding-top5 {
            padding-top: 5px;
        }
        .layui-form-item .layui-inline {
            margin-bottom: 5px;
        }
        /*------中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        ul > li {
            list-style: none;
        }
        /*------中部开始------*/
        .d-lg-flex {
            display: flex !important;
        }
        .align-items-lg-center {
            -ms-flex-align: center !important;
            align-items: center !important;
        }
        .height-85vh--lg {
            height: 85vh;
        }
        .container {
            max-width: 960px;
        }
        .justify-content-lg-between {
            -ms-flex-pack: justify !important;
            justify-content: space-between !important;
        }
        .other-login {
            float: right;
        }
        /*------中部结束------*/
    }
</style>
<#include 'header.ftl'>
<main class="" style="overflow-x: hidden;">
    <div class="main-banner gradient-overlay-half-dark-v3">
        <div class="d-lg-flex align-items-lg-center height-85vh--lg">
            <div class="container space-2" style="z-index: 2;" id="bodyPage">
<#--                <img src="images/main-bg.jpg" class="bg">-->
<#--                <img src="images/test.jpg" class="bg">-->
                <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-lg-5 main-title" style="z-index: 2">
                    </div>
                    <#if ! Session["SPRING_SECURITY_CONTEXT"] ??>
                    <div class="col-lg-5" style="z-index: 2">
                        <div class="bg-white shadow-sm rounded p-6">
                            <form class="js-validate layui-form" novalidate="novalidate" method="post" id="login_form">
                                <div class="mb-4">
                                    <h2 class="h4">登录</h2>
                                </div>

                                <!-- Input -->
                                <div class="js-form-message mb-3">
                                    <div class="js-focus-state input-group input-group form">
                                        <input type="text" class="form-control form__input" name="username" required="" placeholder="用户名"
                                               aria-label="Enter your username" aria-describedby="username-error" aria-invalid="true">
                                    </div>
                                    <div id="username-error" class="invalid-feedback" style="display: none;">This field is required.</div></div>
                                <!-- End Input -->

                                <!-- Input -->
                                <div class="js-form-message mb-3">
                                    <div class="js-focus-state input-group input-group form">
                                        <input type="password" class="form-control form__input" name="password" required="" placeholder="密码"
                                               aria-label="Enter your password" aria-describedby="password-error">
                                    </div>
                                    <div id="password-error" class="invalid-feedback" style="display: none;">This field is required.</div></div>
                                <!-- Input -->
                                <div class="js-form-message mb-3">
                                    <div class="js-focus-state input-group input-group form">
                                        <input type="text" class="form-control form__input" name="verificationCode" required="" placeholder="验证码"
                                               aria-label="Enter your verification code">
                                        <img src="/verifycode/get" class="form-control"
                                             id="codeImg" alt="验证码" style="max-width: 100px;margin-right: 5px" />
                                    </div>
                                    <div id="password-error" class="invalid-feedback" style="display: none;">This field is required.</div></div>
                                <!-- Input -->

                                <button type="submit" class="btn btn-block btn-primary">登录</button>
                                <button type="button" class="btn btn-block btn-primary mb-3" id="register">注册</button>
                                <div class="layui-form-item" style="margin-bottom: 5px">
                                    <input type="checkbox" name="rememberMe" lay-skin="primary" title="记住我">
                                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                        <span>记住我</span>
                                        <i class="layui-icon layui-icon-ok"></i>
                                    </div>
                                    <a href="/forget" class="layadmin-user-jump-change layadmin-link"
                                       style="margin-top: 7px;color: #029789!important;float: right;">忘记密码？</a>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label style="font-size: 12px;padding-right: 10px">第三方登录</label>
                                        <a href="/binding/qq"><i style="font-size: 26px;position: relative;top: 5px;color: blue" class="layui-icon layui-icon-login-qq"></i></a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    </#if>

                </div>
            </div>
        </div>
    </div>

    <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" style="color: white" id="carousel">
            </div>
        </div>
    </div>

    <div class="container-fluid" style="background-color: black;padding-top: 8px;padding-bottom: 8px">
        <div class="row justify-content-around">
            <div class="col-12 col-sm-12 col-md-5">
                <div class="list-group" id="results">
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-5 padding-top5">
                <div class="list-group" id="users">

                </div>
            </div>
        </div>
    </div>
</main>
<script src="/js/fullplay.js" type="text/javascript"></script>
<script type="text/html" id="test">
    {{# for (let i = 0;i < 3; i++) { }}
    <div class="carousel-item {{# if (i==0) { }} active {{# } }}">
        <div style="background-color: black;padding: 10px 0" class="container-fluid">
            <div class="row align-items-center justify-content-center">
                {{# for (let j = 0;j < 3; j++) { }}
                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                    <div class="card bg-dark text-white" style="max-width: 442px;margin: 0 auto">
                        {{# if (d.data[i * 3 + j] !== undefined && d.data[i * 3 + j].resultPictureList.length > 0) { }}
                            <img class="card-img" src="{{ d.data[i * 3 + j].resultPictureList[0].path }}" alt="Card image">
                        {{# } else { }}
                            <img class="card-img" src="/images/1.jpg" alt="Card image">
                        {{# } }}
                        <div class="card-img-overlay">
                            <h5 class="card-title">{{# if (d.data[i * 3 + j] != undefined) {}} {{d.data[i * 3 + j].name}} {{#} else { }} 暂无 {{# } }}</h5>
                            <p class="card-text">{{# if (d.data[i * 3 + j] != undefined) {}} {{d.data[i * 3 + j].info}} {{#} else { }} 暂无 {{# } }}</p>
                        </div>
                    </div>
                </div>
                {{# } }}
            </div>
        </div>
    </div>
    {{# } }}
</script>
<script type="text/html" id="registerForm">
    <form class="layui-form" style="max-width: 280px;padding-top: 7%;margin: 0 auto">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">头像</label>
            <div class="layui-input-block">
                <img class="layui-circle layui-anim" src="/images/logo.png"
                     alt="logo" width="50" id="uploadLogo" name="avatarPath">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="checkPassword" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required  lay-verify="required|email" placeholder="便于找回密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="SEX_MAN" title="男" checked >
                <input type="radio" name="sex" value="SEX_WOMAN" title="女">
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="registerForm">立即提交</button>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="resultsData">
    <a class="list-group-item list-group-item-action">
        优秀成果展示
    </a>
    {{# layui.each(d.payload, function(index, item) { }}
    {{# if (index == 0) { }}
    {{# if (item.link != null) { }}
    <a href="{{item.link}}" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-primary">
        <span class="badge badge-primary badge-pill">1</span>
        {{ item.name }}
    </a>
    {{# } else { }}
    <a href="javascript:;" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-primary">
        <span class="badge badge-primary badge-pill">1</span>
        {{ item.name }}
    </a>
    {{# } }}
    {{# } else if (index == 1) { }}
    {{# if (item.link != null) { }}
    <a href="{{item.link}}" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-secondary">
        <span class="badge badge-primary badge-pill">2</span>
        {{ item.name }}
    </a>
    {{# } else { }}
    <a href="javascript:;" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-secondary">
        <span class="badge badge-primary badge-pill">2</span>
        {{ item.name }}
    </a>
    {{# } }}
    {{# } else if (item.link != null) { }}
    <a href="{{item.link}}" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-info">
        <span class="badge badge-primary badge-pill">{{index + 1}}</span>
        {{ item.name }}
    </a>
    {{# } else { }}
    <a href="javascript:;" class="layui-text layui-elip list-group-item list-group-item-action list-group-item-info">
        <span class="badge badge-primary badge-pill">{{index + 1}}</span>
        {{ item.name }}
    </a>
    {{# } }}
    {{# }) }}
    {{# if (d.payload == null || d.payload.length === 0) { }}
    暂无数据
    {{# } }}
</script>
<script type="text/html" id="usersData">
    <a class="list-group-item list-group-item-action">
        优秀人员排行
    </a>
    {{# layui.each(d.payload, function(index, item) { }}
    {{# if (index == 0) { }}
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">
        <span class="badge badge-primary badge-pill">1</span>
        {{item}}
    </a>
    {{# } else if (index == 1) { }}
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">
        <span class="badge badge-primary badge-pill">2</span>
        {{item}}
    </a>
    {{# } else { }}
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">
        <span class="badge badge-primary badge-pill">{{index + 1}}</span>
        {{item}}
    </a>
    {{# } }}
    {{# }) }}
    {{# if (d.payload == null || d.payload.length === 0) { }}
    暂无数据
    {{# } }}
</script>
<script type="text/javascript">
    $(function () {
        $('#codeImg').click(function(){
            this.src = '/verifycode/get?date='+ new Date().getTime();
        }).click().show();

        $(".main-banner").fullImages({
            autoplay :  5000,
            images: ['/images/test.jpg', '/images/img4.jpg', '/images/main-bg.jpg'],
            hiddenOpacity: 0.45,
            showOpacity: 1
        });
    })

    layui.use(['layer', 'form', 'laytpl'], function () {
        let layer = layui.layer
            , form = layui.form
            , laytpl = layui.laytpl;
        form.render();

        $.get('/result/top/get', function (res) {
            var getTpl = test.innerHTML
                ,view = document.getElementById('carousel');
            laytpl(getTpl).render({"data": res.payload}, function(html){
                view.innerHTML = html;
            });
        })


        $.get('/result/top/get', function(data) {
            var getTpl = resultsData.innerHTML
                ,view = document.getElementById('results');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });

        })

        $.get('/result/user/top?num=5', function(data) {
            var getTpl = usersData.innerHTML
                ,view = document.getElementById('users');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });
        })

        $('#login_form').submit(function (e) {
            e.preventDefault();
            let username = $('input[name="username"]').val();
            let password = $('input[name="password"]').val();
            let verificationCode = $('input[name="verificationCode"]').val();
            let rememberMe = $('.layui-form-checked').length > 0 ? 'on' : 'off';

            console.log(rememberMe)

            if (username === undefined || username === '') {
                layer.msg('用户名不能为空！');
                $('input[name="username"]').focus()
                return;
            } else if (password === undefined || password === '') {
                layer.msg('密码不能为空！');
                $('input[name="password"]').focus()
                return;
            } else if (verificationCode === undefined || verificationCode === '') {
                layer.msg('验证码不能为空！');
                $('input[name="verificationCode"]').focus()
                return;
            }

            $.post('/login', {"username": username, "password": password, "verificationCode": verificationCode, "remember-me": rememberMe}, function (data) {
                layer.msg(data.msg);
                if (data.success) {
                    location.reload()
                } else if (data.msg === '密码错误！') {
                    $('input[name="password"]').focus()
                    $('#codeImg').click()
                } else if (data.msg === '用户名错误！') {
                    $('input[name="username"]').focus()
                } else if (data.msg === '验证码已失效！' || data.msg === '验证码错误！') {
                    $('#codeImg').click()
                    $('input[name="verificationCode"]').val('')
                } else {
                    $('#codeImg').click()
                    $('input[name="verificationCode"]').val('')
                }
            })
        })

        $(document).on('click', '#uploadLogo', function () {
            layer.open({
                type: 2,
                title: '裁切头像',
                content: '/test',
                area: ['90%', '90%'],
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    var w = $(layero).find("iframe")[0].contentWindow;
                    w.myCropper({aspectRatio: 1}, $('#uploadLogo')[0].src, $('#uploadLogo'))
                    let find = body.find("#check");
                    $(find).on('click', function () {
                        layer.close(layer.index)
                    })
                }
            })
        })

        $('#register').click(function () {
            layer.open({
                type: 1 ,
                title: '注册',
                area: ['70%', '70%'],
                shade: 0.4,
                content: $("#registerForm").html(),
                btn:['提交','取消'],
                scrollbar: true,
                success: function() {
                    form.render();
                },
                yes: function(index,layero){
                    layero.find('form').find('button[lay-submit]').click();
                    return false;
                }
            });
        })

        form.on('submit(registerForm)', function(data){
            $('input').removeClass('layui-form-danger')
            if (data.field.password !== data.field.checkPassword) {
                layer.msg("俩次密码不一致!");
                let $input = $('input[name="checkPassword"]');
                $input.focus()
                $input.select();
                return false;
            }
            let load = layer.load()
            let src = $('img[name=avatarPath]').attr('src');
            let message = new FormData();
            if (src.startsWith("/images")) {
                data.field.file = src;
            } else {
                let file = dataURLToFile($("img[name=avatarPath]")[0].src, new Date().getTime());
                if (file !== []) {
                    message.append("file", file);
                }
            }

            let addDataField = (names) => {
                $.each(names, (i, value) => {
                    message.append(value, data.field[value])
                })
            }

            addDataField(["username", "password", "checkPassword", "realName", "sex", "email"]);

            $.ajax({
                url: '/user/register',
                type: 'post',
                contentType: false,
                processData: false,
                dataType: "json",
                data: message,
                success: function (data) {
                    layer.close(load)
                    if (data.success) {
                        layer.closeAll();
                        layer.msg("注册成功！请前往邮箱激活！");
                    } else {
                        layer.msg(data.msg);
                        if (data.msg === '用户名被占用！') {
                            $('input[name="username"]').addClass('layui-form-danger')
                            $('input[name="username"]').focus().select()
                        } else if (data.msg === '邮箱被占用！') {
                            $('input[name="email"]').addClass('layui-form-danger')
                            $('input[name="email"]').focus().select()
                        }
                    }
                },
                error: function (data) {
                    layer.msg(data.msg);
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //将base64转换为blob
        function dataURLToFile(dataUrl, fileName) {
            let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], fileName, {type: mime});
        }
    })
</script>
<#include "../footer.ftl">